<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box1,
    .box2 {
      height: 100px;
      width: 100px;
      border-radius: 50%;
      background-color: rgb(187, 255, 255);
      margin: 20px;
      position: relative;
    }

    .box1 {
      animation: box1 2s ease infinite;
    }
    .box2 {
      animation: box2 2s ease infinite;
    }

    /* 阻塞主线程，translate只触发合成进程的一系列改变，即使主线程阻塞，照样可以运行动画效果
      但是left这种老css的样式触发的位置改变，是需要重新触发layout Tree生成的，其在主线程，所以主线程阻塞就不工作了 */
    @keyframes box1 {
      0% {
        left: 0;
      }

      50% {
        left: 100px;
      }

      100% {
        left: 0;
      }
    }

    @keyframes box2 {
      0% {
      }

      50% {
        transform: translateX(100%);
      }

      100% {
        transform: translateX(0);
      }
    }
  </style>
</head>

<body>
  <button id="btn">delay</button>
  <button id="changeColor">changeColor</button>
  <button id="insert">insert</button>
  <div class="box1"></div>
  <div class="box2"></div>
  <script>
    function delay(time) {
      let old = new Date()
      while (time) {
        if (new Date() - old >= time) {
          return
        }
      }
    }
    btn.onclick = () => {
      // 阻塞主线程
      delay(3000)
    }

    let interval
    let interval2
    let color
    changeColor.onclick = (event) => {
      console.log(interval)
      console.log(event)
      // 改变背景颜色，阻塞主线程后不能引发重绘，会停止变色
      color = 'red'
      interval = setInterval(() => {
        color === 'red' ? color='blue' : color='red',
        document.querySelector('.box1').style.backgroundColor = color
        document.querySelector('.box2').style.backgroundColor = color
      }, 1000)
    }
    insert.onclick = (e) => {
      // 改变dom解构也会引发dom解析生成dom树更新，此后的一系列流程重新走
      interval2 = setInterval(() => {
        let li = document.createElement('li')
        li.innerText = 'fqmyysjjd'
        document.querySelector('body').appendChild(li)
      }, 500)
    }

  </script>
</body>

</html>